<template>
  <view :class="['box', themeClass]">
    <view class="header"></view>
    <view class="category">
      <Moe :bgList="bgList"></Moe>
      <Mohu :bgList="bgList"></Mohu>
      <Phone></Phone>
      <Pixiv :bgList="bgList"></Pixiv>
      <Pexels :bgList="bgList"></Pexels>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useTheme } from '@/hooks/useTheme'
import bg1 from '@/static/bg/bg1.png'
import bg2 from '@/static/bg/bg2.png'
import bg3 from '@/static/bg/bg3.png'
import bg4 from '@/static/bg/bg4.png'
import bg5 from '@/static/bg/bg5.jpg'
import bg6 from '@/static/bg/bg6.png'
import bg7 from '@/static/bg/bg7.jpg'
import bg8 from '@/static/bg/bg8.png'
import Pixiv from './Pixiv.vue'
import Pexels from './Pexels.vue'
import Phone from './Phone.vue'
import Moe from './Moe.vue'
import Mohu from './Mohu.vue'
const { themeClass } = useTheme()
const bgList = [bg1, bg2, bg3, bg4, bg5, bg6, bg7, bg8]
</script>

<style lang="scss">
.box {
  display: flex;
  flex-direction: column;
  height: 100vh;

  .header {
    width: 100%;
    height: var(--status-bar-height);
  }

  .category {
    overflow: auto;
    padding-top: 0 !important;
    flex: 1;
    padding: 5px 0;

    h1 {
      box-sizing: border-box;
      font-size: 20px;
      font-weight: bold;
      margin: 20px 5rpx 10px 5rpx;
      padding: 10rpx;
      border-left: 4px solid #009dff;
      box-shadow: 0.3em 0.3em 0.7em var(--shadow);
      transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .wallpaper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      box-sizing: border-box;
      padding: 0rpx 5rpx 5rpx 5rpx;
      gap: 5px;

      .item {
        height: 100px;
        box-shadow: 0.3em 0.3em 0.7em var(--shadow);
        transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        font-size: 18px;
        font-weight: bold;
        position: relative;
        overflow: hidden;
        color: white;
        font-weight: bold;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);

        text {
          z-index: 10;
        }

        image {
          position: absolute;
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 5px;
          z-index: 5;
        }
      }
    }
  }
}
</style>